<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.fade-enter-active, .fade-leave-active {
		  transition: opacity .5s ease;
		}

		.fade-enter, .fade-leave-active {
		  opacity: 0
		}

		.child-view {
		  position: absolute;
		  transition: all .5s cubic-bezier(.55,0,.1,1);
		}

		.slide-left-enter, .slide-right-leave-active {
		  opacity: 0;
		  -webkit-transform: translate(30px, 0);
		  transform: translate(30px, 0);
		}

		.slide-left-leave-active, .slide-right-enter {
		  opacity: 0;
		  -webkit-transform: translate(-30px, 0);
		  transform: translate(-30px, 0);
		}
	</style>
</head>
<body>

	<div id="app"></div>
	
	<script src="node_modules/vue/dist/vue.min.js"></script>
	<script src="node_modules/vue-router/dist/vue-router.min.js"></script>
	<script>
		
		var Home = {
		  template: `
		    <div class="home">
		      <h2>Home</h2>
		      <p>hello</p>
		    </div>
		  `
		}

		var Parent = {
		  data () {
		    return {
		      transitionName: 'slide-left'
		    }
		  },
		  // dynamically set transition based on route change
		  watch: {
		    '$route' (to, from) {
		      var toDepth = to.path.split('/').length
		      var fromDepth = from.path.split('/').length
		      this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
		    }
		  },
		  template: `
		    <div class="parent">
		      <h2>Parent</h2>
		      <transition :name="transitionName">
		        <router-view class="child-view"></router-view>
		      </transition>
		    </div>
		  `
		}

		var Default = { template: '<div class="default">default</div>' }
		var Foo = { template: '<div class="foo">foo</div>' }
		var Bar = { template: '<div class="bar">bar</div>' }

		var router = new VueRouter({
		  // mode: 'history',
		  // base: __dirname,
		  routes: [
		    { path: '/', component: Home },
		    { path: '/parent', component: Parent,
		      children: [
		        { path: '', component: Default },
		        { path: 'foo', component: Foo },
		        { path: 'bar', component: Bar }
		      ]
		    }
		  ]
		})

		new Vue({
		  router,
		  template: `
		    <div id="app">
		      <h1>Transitions</h1>
		      <ul>
		        <li><router-link to="/">/</router-link></li>
		        <li><router-link to="/parent">/parent</router-link></li>
		        <li><router-link to="/parent/foo">/parent/foo</router-link></li>
		        <li><router-link to="/parent/bar">/parent/bar</router-link></li>
		      </ul>
		      <transition name="fade" mode="out-in">
		        <router-view class="view"></router-view>
		      </transition>
		    </div>
		  `
		}).$mount('#app');

	</script>
</body>
</html>